<template>
  <div id="Radar"></div>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import { Radar } from '@antv/g2plot'

export default {
  name: 'Radar',
  data() {
    return {
      data: [
        { type: '鼠标', mark: '办公用品', value: 130 },
        { type: '键盘', mark: '办公用品', value: 160 },
        { type: '耳机', mark: '办公用品', value: 130 },
        { type: '音响', mark: '办公用品', value: 120 },
        { type: '记事本', mark: '办公用品', value: 170 },
        { type: '厕纸', mark: '生活用品', value: 170 },
        { type: '湿巾', mark: '生活用品', value: 125 },
        { type: '面巾', mark: '生活用品', value: 175 },
        { type: '牙刷', mark: '生活用品', value: 200 },
        { type: '牙膏', mark: '生活用品', value: 200 },
      ],
    }
  },
  mounted() {
    new Radar('Radar', {
      title: {
        text: '产品类目对比分析',
        visible: true,
      },
      data: this.data,
      radiusField: 'value',
      angleField: 'type',
      seriesField: 'mark',
      color: ['#4577FF', '#FEC108'],
      legend: {
        visible: true,
        position: 'top-right',
      },
    }).render()
  },
}
</script>

<style scoped></style>
